<template>
  <div>
    <my-breadcrumb :items="['商户提现', '创建提现账号']"></my-breadcrumb>
    <div class="warp">
      <div class="search">
        <div class="input">
          <input type="text" placeholder="根据手机号码检索用户" v-model="phone" @keyup.enter="searchUser">
        </div>
        <Button type="primary" shape="circle" icon="ios-search" @click="searchUser"></Button>
      </div>
      <div class="list">
        <ul>
          <li v-for="(item, index) in userList" :key="index" @click="select(index)" :class="active === index ? 'active' : ''">
            <div class="item">
              <div class="avatar">
                <Avatar :src="item.profilePhotoPath" size="large"></Avatar>
                <div class="icon">
                  <Icon type="male" color="#2d8cf0" size="14" v-if="item.sex === 1"></Icon>
                  <Icon type="female" color="#ed3f14" size="14" v-if="item.sex === 2"></Icon>
                </div>
              </div>
              <div class="list_name">
                <p>{{item.nickname}}</p>
              </div>
            </div>
          </li>
          <li class="load_more">
            <div v-if="isSearch">
              <p @click="getAll">--恢复全部--</p>
            </div>
            <div v-else>
              <Button type="text" v-if="more" @click="loadMore">加载更多</Button>
              <p v-else>--已全部加载完成--</p>
            </div>
          </li>
        </ul>
      </div>
      <div class="code_card">
        <div class="user" v-if="userSelected.nickname">
          <div class="avatar">
            <Avatar size="large" :src="userSelected.profilePhotoPath" shape="square"></Avatar>
          </div>
          <div class="name">
            <p>
              {{userSelected.nickname}}
              <Icon type="android-person" size="16" :color="userSelected.sex === 1 ? '#2d8cf0' : '#ed3f14'" v-if="userSelected.sex !== 0"></Icon>
            </p>
          </div>
        </div>
        <div class="user" v-else>请选择账号绑定的用户</div>
        <div class="code">
          <Input v-model="params.remark" placeholder="备注"/>
          <div style="height: 16px;"></div>
          <Button type="primary" @click="enterPassword" long :disabled="!params.userId">增加提现账号</Button>
        </div>
      </div>
    </div>
    <Modal v-model="showKeyboard">
      <keyboard once="pay" @draw="checkPassword"></keyboard>
    </Modal>
  </div>
</template>

<script>
import keyboard from '../../common/keyboard'
export default {
  name: 'create-account',
  data () {
    return {
      // itemAttrs: ['profilePhotoPath', 'city', 'nickname', 'province', 'sex', 'wxPublicAccountOpenid'],
      userList: [],
      userSelected: {},
      active: -1,
      page: {
        pageSize: 10,
        pageNum: 0
      },
      phone: '',
      more: true,
      loading: false,
      params: {
        userId: null,
        remark: '',
        password: ''
      },
      showKeyboard: false,
      isSearch: false
    }
  },
  methods: {
    select (index) {
      this.userSelected = this.userList[index]
      this.active = index
      this.params.userId = this.userSelected.id
    },
    loadMore () {
      this.loading = true
      this.page.pageNum++
      this.$ajax.post('/branch/all/user/list', this.page).then(res => {
        if (res.data.success) {
          this.userList.push(...res.data.data.list)
          this.more = (res.data.data.nextPage !== 0)
        }
        this.loading = false
      })
    },
    searchUser () {
      // search: '/branch/user/search'
      this.$ajax.post('/branch/user/search', {phone: this.phone, pageQuery: {pageNum: 1, pageSize: 15}})
        .then(res => {
          if (res.data.success) {
            this.userList = res.data.data.pageInfo.list
            this.isSearch = true
          }
        })
    },
    getAll () {
      this.page.pageNum = 0
      this.userList = []
      this.isSearch = false
      this.loadMore()
    },
    enterPassword () {
      this.showKeyboard = true
    },
    checkPassword (password) {
      this.params.password = password
      this.bindAccount()
    },
    bindAccount () {
      this.$ajax.post('/withdrawal/account/create', this.params)
        .then(res => {
          if (res.data.success) {
            this.$Message.success('提交成功，等待审批')
            this.showKeyboard = false
          }
        })
    }
  },
  components: {
    keyboard
  },
  created () {
    this.loadMore()
  }
}
</script>

<style scoped>
  .warp{
    overflow: hidden;
  }
  .search{
    width: 260px;
    padding: 10px;
    border: 1px solid #dddee1;
    border-bottom: none;
  }

  .search .input{
    float: left;
    height: 32px;
    width: 194px;
    border: 1px solid #dddee1;
    padding-left: 6px;
    margin-right: 12px;
  }
  .input input{
    border: none;
    outline: none;
    height: 100%;
  }
  .list{
    float: left;
    width: 260px;
    height: 550px;
    margin-right: 24px;
    overflow: auto;
    border: 1px solid #dddee1;
    cursor: pointer;
    position: relative;
  }
  .list li:hover{
    background-color: #e9eaec;
  }
  .list li.active{
    border-left: 2px solid #2d8cf0;
    background-color: #dddee1;
  }
  .item{
    overflow: hidden;
    padding: 10px;
  }
  .item .avatar{
    float: left;
    position: relative;
  }
  .avatar .icon{
    position: absolute;
    right: 0;
    bottom: 0;
  }
  .item .list_name{
    float: left;
    margin-left: 10px;
  }
  .list_name p:nth-child(1){
    font-size: 14px;
  }
  .load_more{
    text-align: center;
  }
  .code_card{
    float: left;
    /*width: 400px;*/
    /*height: 260px;*/
    padding: 12px;
    margin-top: 100px;
    margin-left: 100px;
    border-radius: 3px;
    border: 1px solid #dddee1;
    /*box-shadow: -1px 0px 10px #80848f;*/
  }
  .code{
    width: 400px;
  }
  .code img{
    display: block;
  }
  .code p{
    line-height: 24px;
    text-align: center;
    color: #80848f;
  }
  .user{
    overflow: hidden;
    margin-bottom: 12px;
  }
  .user .avatar{
    float: left;
  }
  .user .name{
    float: left;
    margin-left: 10px;
  }
</style>
